<template>
  <header>
    <router-link :to="item.path" v-for="item in navList" :key="item.id">
      {{ item.title }}
    </router-link>
  </header>
</template>

<script setup lang="ts">
import { reactive } from "vue";
interface Nav {
  id: number;
  title: string;
  name: string;
  path: string;
}
const navList: Array<Nav> = [
  {
    id: 0,
    path: "/",
    title: "首页",
    name: "home",
  },
  {
    id: 2,
    path: "/muc",
    title: "音乐",
    name: "muc",
  },
  {
    id: 3,
    path: "/video",
    title: "视频",
    name: "video",
  },
];
</script>

<style lang="scss" scoped>
header {
  a {
    padding: 0 8px;
  }
}
</style>
